import { ReactNode, memo } from "react";
import { ExtraColor } from ".";
import styles from './TableCell.module.scss';
import { TableCellExtra } from "./TableCellExtra";

interface IProps {
    /** extra放置位置 */
    placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
    /** 表格项原始渲染内容 */
    origin: ReactNode;
    /** 新增的额外渲染内容，渲染在表格项的四个角上 */
    extra?: ReactNode;
    /** 额外展示信息颜色 */
    extraColor?: ExtraColor;
    style?: React.CSSProperties;

    // 显示两个
    /** 新增的额外渲染内容，渲染在表格项的四个角上 */
    extra2?: ReactNode;
    /** 额外展示信息颜色 */
    extraColor2?: ExtraColor;
    /** extra放置位置 */
    placement2?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
}

/**
 * 自定义table cell，当表格项可以编辑或者需要额外信息展示时使用
 * 携带额外信息(放置在四个角上)
 */
const TableCell = memo((props: IProps) => {
    const { origin, extra, placement, extraColor, style = {}, extra2, extraColor2, placement2 } = props;
    return (
        <div className={styles.tableCell} style={style}>
            {(origin != '0' ||( extra !== false && extra != '') || (extra2 !== false && extra2 != '' && extra2 != '0')) && origin }
            {
                extra !== false && extra != '' && (
                    <TableCellExtra color={extraColor!} placement={placement!}>
                        {extra}
                    </TableCellExtra>
                )
            }
            {
                extra2 !== false && extra2 != '' && extra2 != '0' && (
                    <TableCellExtra color={extraColor2!} placement={placement2!}>
                        {extra2}
                    </TableCellExtra>
                )
            }
        </div>
    );
});

export {
    TableCell
};

